<template>
    <div class="moveBill slideArrow">
        <transition name="my">
         <div v-if="show">
             <!-- 分享 -->
            <div class="slideArrow-share" v-if="checkShareStatus">
                <div class="slideArrow-share-img">
                    <img src="../../assets/share.png" alt>
                </div>
                <p class="slideArrow-text">分享</p>
            </div>
            <!-- 点赞 -->
            <div class="slideArrow-thump" @click="saveSign(1)" v-if="checkLikeStatus">
                <div class="slideArrow-thump-img">
                    <img :src="thumbStatus==true?'static/img/tp3.png':'static/img/tp2.png'" alt>
                </div>
                <p class="slideArrow-text">123次</p>
            </div>
          </div>
        </transition>
          <!-- 展开按钮 -->
           <div class="slideArrow-aside" @click="show = !show">
              <img src="../../assets/flagbomArrow.png" alt>
          </div>
    </div>
</template>
<script>
export default {
    data() {
      return{
          show : false,
          likeStatus:false, //点赞是否开启
          shareStatus:false  //分享是否开启
      }
    },
    created(){
		this.checkThumb();
    },
    computed: {
        liveInfo() {
			return this.$store.state.liveInfo;
        },
        thumbStatus(){
            return this.$store.state.thumbStatus;
        },
        // 点赞
        checkLikeStatus(){
            if(this.liveInfo.thumbSwitch == 1){
                this.likeStatus = true;
            }else{
                this.likeStatus = false;
            }
            return this.likeStatus; 
        },
        // 分享
        checkShareStatus(){
           if(this.liveInfo.wxShareSwitch == 1){
                this.shareStatus = true;
            }else{
                this.shareStatus = false;
            }
            return this.shareStatus; 
        }
	},
    methods:{
        saveSign(e){
            var info = this.$store.state.liveInfo;
            var openId=""
            if(sessionStorage.getItem("openid")){
                openId = sessionStorage.getItem("openid");
            }else{
                openId =localStorage.getItem("youkeId")
            }
            if (e == 1) {
					// 点赞
                let data = new FormData();
                data.append("roomId", this.$route.params.id);
                data.append("openId", openId);
                this.$http.post(this.$api.saveThumb(), data).then(res => {
                    if (res.data.code == 0) {
                        this.checkThumb();
                    } else {
                        this.$toast(res.data.msg)
                    }
                });
            }
        },
        // 查询点赞状态
        checkThumb(){
            var openId=""
            if(sessionStorage.getItem("openid")){
                openId = sessionStorage.getItem("openid");
            }else{
                openId =localStorage.getItem("youkeId")
            }
            this.$http.get(this.$api.thumbStatus(),{params:{
                roomId : this.$route.params.id,
                openId : openId
            }}).then(res => {
                if (res.data.code == 0) {
                    this.$store.state.thumbStatus = res.data.status
                }else{
                    alert(res.data.msg)
                }
            });
        },
    }
}
</script>
<style scoped>
/* 动画 */
.my-enter,.my-leaave-to{
    opacity: 0;
    transform: translateY(150px);
}
.my-enter-active,.my-leave-active{
    transtion: all .8s ease;
}
.moveBill{
    display: inline-block;
    position: fixed;
    right: 20px;
    bottom: 10px;
    border-radius: 17px;
    background: #fff;
}
.slideArrow-aside{
    width: 35px;
    height: 35px;
}
.slideArrow-share,.slideArrow-thump{
    margin-bottom: 10px;
}
.slideArrow-aside>img,.slideArrow-thump-img>img,.slideArrow-share-img>img{
    width: 100%;
    height: 100%;
}
.slideArrow-thump-img,.slideArrow-share-img{
    width: 30px;
    height: 30px;
    margin:  0px auto;
}
.slideArrow-text{
    font-size: 12px;
}
</style>